<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
</head>

<body>

</body>
<script>
    // catch()  .then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。
    function readTxt(url) {
        return new Promise(function (resolve, reject) {
            $.ajax({
                type: "get",
                url: url,
                success: function (txt) {
                    resolve(txt);// 直接传递数据
                }
            })
        })
    }



    // var arr = [];
    // var list = arr.concat(1, 2).concat(3, 4).concat(5, 6);    //数组的链式操作(方法返回值都属数组)
    // console.log(list);

    // 链式操作  (Promise实例的链式操作  方法返回值都是新的新的实例) 
    // catch 会接收整个链式操作过程中的所有错误

    // readTxt("../data/1.txt").then(txt => {
    //     console.log("成功:", txt);
    //     // 哈哈;
    //     return readTxt("../data/2.txt");    // p 
    // }).then(txt => {
    //     console.log("成功:", txt);
    //     return readTxt("../data/3.txt");    // p 
    // }).then(txt => {
    //     console.log("成功:", txt);
    // }).catch(err => {
    //     console.log("失败:", err);
    // })

    // ---------------------------数组链式操作-------------------------------

    // var arr = [];
    // var list = arr.concat(1, 2).concat(3, 4).concat(5, 6);    //数组的链式操作(方法返回值都属数组)
    // console.log(list);

    // 数组链式操作  返回值=>还是一个数组
    // var arr = [];
    // var arr1 = arr.concat(1, 2); // 拼接后的新数组  [1,2]
    // console.log(arr1);

    // var arr2 = arr1.concat(3, 4);  // [1,2,3,4]
    // console.log(arr2);

    // var arr3 = arr2.concat(5, 6);
    // console.log(arr3);




    // ---------------------------数组链式操作-------------------------------

    // 原代码
    // readTxt("../data/1.txt").then(txt => {
    //     console.log("成功:", txt);
    //     // 哈哈;
    //     return readTxt("../data/2.txt");    // p 
    // }).then(txt => {
    //     console.log("成功:", txt);
    //     return readTxt("../data/3.txt");    // p 
    // }).then(txt => {
    //     console.log("成功:", txt);
    // }).catch(err => {
    //     console.log("失败:", err);
    // })


    //  Promise的链式操作  每次调用then方法 返回一个新的Promise实例,新的promise实例依赖上一个实例的状态改变(执行对应的回调函数)
    //  readTxt(异步操作有结果) => p (实例)  =>  p1   => p2  => p3
    // 成功 就走then  返回成功状态的Promise实例,传递的数据依赖于 回调函数的返回值
    // 失败 不走then  后续实例的状态都是改为已失败  错误信息向后传递

    var p = readTxt("../data/1.txt");
    console.log("p", p);

    // 每次调用then方法 返回一个新的Promise实例,新的promise实例依赖上一个实例的状态改变(执行对应的回调函数)
    var p1 = p.then(function (txt) {
        console.log("成功1:", txt);
        return 1;
    })
    console.log("p1", p1);  // 默认是进行中  (p1的状态改变 依赖于then回调函数,传递的数据依赖于 回调函数的返回值) 

    var p2 = p1.then(function (val) {
        console.log("p1:", val);
        // 嘿嘿;
        return 2;
    })
    console.log("p2", p2);

    var p3 = p2.then(function (val) {
        console.log("p1:", val);
    })

    p3.catch(err => {
        console.log("出现错误", err);
        // throw err;
    })

</script>

</html>